/*
 * @Author: jiayu
 * @Date: 2022-08-04 16:12:56
 * @LastEditors: jiayu
 * @LastEditTime: 2023-11-07 17:01:25
 * @Description:
 */
import Card from '@/components/Card';
import { instance } from '@/services/jy-api/api';
import { useOrganizationalStore } from '';
import { Pie } from '@ant-design/plots';
import { memo, useEffect, useState } from 'react';
import styles from './index.less';

const Index = memo(() => {
  const { currentDepartmentId } = useModel('organizational')
  const [config, setConfig] = useState<any>()

  // const data = [
  //   {
  //     type: '登录用户',
  //     value: 27,
  //   },
  //   {
  //     type: '僵尸用户',
  //     value: 25,
  //   },
  // ];


  const getData = () => {
    instance('/index/Screen/usage', {
      params: {
        department_id: currentDepartmentId
      }
    }).then(data => {
      const config = {
        appendPadding: 10,
        data: [
          {
            type: '登录用户',
            value: data.data.user
          },
          {
            type: '僵尸用户',
            value: data.data.corpse
          }
        ],
        angleField: 'value',
        colorField: 'type',
        radius: 0,
        innerRadius: 0.,
        label: {
          type: 'inner',
          offset: '-50%',
          content: '{name}: {value}%',
          style: {
            textAlign: 'center',
            fontSize: 14,
          },
        },
        interactions: [
          {
            type: 'element-selected',
          },
          {
            type: 'element-active',
          },
        ],
        statistic: {
          title: false,
          content: {
            style: {
              whiteSpace: 'pre-wrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            },
            content: '',
          },
        },
        pieStyle: {
          lineWidth: 0,
        },
        state: {
          // 设置 active 激活状态的样式
          active: {
            animate: { duration: 100, easing: 'easeLinear' },
            style: {
              lineWidth: 0,
              stroke: '#000',
            },
          },
        },
        color: ['#0081FF', '#FDBF5E'],
        legend: {
          itemName: {
            style: {
              fill: '#ffffff',
              fontSize: 14
            },
          },
        }
      };
      setConfig(config)
    })
  }
  useEffect(() => {
    if (currentDepartmentId) {
      getData()
    }
  }, [currentDepartmentId]);

  return (
    <div className={styles.section} id="section4">
      <Card TitleRnder="培训平台使用情况">
        {
          config && <Pie height={255} {...config} />
        }
        <div className={styles.tips}>
          <img className={styles.icon} src={require('../../../images/up.png')} alt="" />
          <div className={styles.text}>登录用户同比上月，增了28%</div>
        </div>
      </Card>
    </div>
  );
})

export default Index;
